<template>
  <ElFormItem prop="entityId" label="业务实体">
    <Select
      v-model="elProps.entityId"
      v-bind="getElProps"
      :options="entityList"
      label-name="entityName"
      value-name="id"
      :clearable="false"
      :disabled="designer.widget.selectedWidget.widgetList.length > 0"
    >
    </Select>
  </ElFormItem>
</template>
<script setup lang="ts" name="EntityIdEditor">
import { ElFormItem } from "element-plus";
import { computed, ref, watch } from "vue";
import { Select } from "@/components/Form";
import appApi from "@/views/micro/app/api";
const props = defineProps({
  designer: {
    type: Object
  },
  elProps: {
    type: Object
  }
});
const getElProps = computed(() => {
  return { ...props.elProps, clearable: true };
});
const entityList = ref([]);
watch(
  () => props.designer!.global.appId,
  async id => {
    if (id) {
      entityList.value = await appApi.getEntityVoList({ id });
    } else {
      entityList.value = [];
    }
  },
  {
    immediate: true
  }
);
</script>
